<template>
  <div class="mobile-page" :class="bgStyle===0?'':'pageOn'" :style="{marginTop:slider+'px',background:activeColor}">
    <div class="home_product">
      <!-- 单列 -->
      <template v-if="itemStyle == 0">

        <div class="list" :style="{paddingLeft:itemPaLSlider+'px',paddingRight:itemPaRSlider+'px'}">
          <div class="item u-flex" :style="{backgroundColor:itemBgColor}" :class="conStyle?'itemOn':''"
               v-for="(item,index) in list">
            <img class="thumb"
                 :src="item.image" alt=""/>
            <div class="u-flex-col u-flex-1 u-p-l-30"> <!-- u-flex-col u-flex-1 u-p-l-30-->
              <div class="title" :style="{color:titleColor}">{{ item.name }}</div>

              <div class="m-b-p">
                <div class="u-flex u-p-t-10 u-row-between"> <!-- u-p-t-10 -->
                  <div class="price" :style="'color:'+fontColor+';'">
                    <span
                      :class="parseFloat(item.price)==0?'free':''">{{ parseFloat(item.price) > 0 ? "￥" + parseFloat(item.price) : '免费' }}</span>
                  </div>
                  <div class="u-tips-color">
                    <span class="u-m-l-10">已服务{{ item.num }}人</span>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 大图 -->
      <template v-if="itemStyle == 1">
        <div class="list list-1"> <!-- list -->
          <div class="item u-m-b-30" :style="{backgroundColor:itemBgColor}" :class="conStyle?'itemOn':''"
               v-for="(item,index) in list"> <!-- u-flex u-p-30 -->
            <img class="thumb"
                 :src="item.image" alt=""/>
            <div class="u-p-t-15 u-p-b-30"> <!-- u-flex-col u-flex-1 u-p-l-30-->
              <div class="title" :style="{color:titleColor}">{{ item.name }}</div>
              <div class="m-b-p">
                <div class="u-flex u-p-t-10 u-row-between"> <!-- u-p-t-10 -->
                  <div class="price" :style="{color:fontColor}">
                    <span
                      :class="parseFloat(item.price)==0?'free':''">{{ parseFloat(item.price) > 0 ? "￥" + parseFloat(item.price) : '免费' }}</span>
                  </div>
                  <div class="u-tips-color">
                    <span class="u-m-l-10">已服务{{ item.num }}人</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>

    </div>
  </div>

</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
  mapState
} from 'vuex'
import {
  getMerActivityLst
} from '@/api/diy'
import {serviceLstApi} from "@/api/reservation";

export default {
  name: 'home_service_list',
  cname: '服务列表',
  configName: 'c_home_service_list',
  icon: 'iconshangpinliebiao2',
  type: 0, // 0 基础组件 1 营销组件 2工具组件
  defaultName: 'serviceList', // 外面匹配名称
  props: {
    index: {
      type: null
    },
    num: {
      type: null
    }
  },
  computed: {
    ...mapState('mobildConfig', ['defaultArray'])
  },
  watch: {
    pageData: {
      handler(nVal, oVal) {
        this.setConfig(nVal)
      },
      deep: true
    },
    num: {
      handler(nVal, oVal) {
        let data = this.$store.state.mobildConfig.defaultArray[nVal]
        this.setConfig(data)
      },
      deep: true
    },
    'defaultArray': {
      handler(nVal, oVal) {
        let data = this.$store.state.mobildConfig.defaultArray[this.num]

        this.setConfig(data);
      },
      deep: true
    }
  },
  data() {
    return {
      // 默认初始化数据禁止修改
      defaultConfig: {
        name: 'serviceList',
        timestamp: this.num,
        themeColor: {
          title: '背景颜色',
          name: 'themeColor',
          default: [{
            item: '#fff'
          }],
          color: [{
            item: '#fff'
          }]
        },
        itemBgColor: {
          title: '内容背景颜色',
          name: 'itemBgColor',
          default: [{
            item: '#fff'
          }],
          color: [{
            item: '#fff'
          }]
        },
        titleColor: {
          title: '标题颜色',
          name: 'titleColor',
          default: [{
            item: '#303133'
          }],
          color: [{
            item: '#303133'
          }]
        },
        fontColor: {
          title: '价格颜色',
          name: 'fontColor',
          default: [{
            item: '#ef022e'
          }],
          color: [{
            item: '#ef022e'
          }]
        },
        numConfig: {
          val: 6
        },
        itemStyle: {
          title: '显示类型',
          name: 'itemSstyle',
          type: 0,
          list: [{
            val: '单列',
            icon: 'iconzuoyoutuwen'
          },
            {
              val: '大图',
              icon: 'icondanlie'
            }
          ]
        },
        bgStyle: {
          title: '背景样式',
          name: 'bgStyle',
          type: 0,
          list: [{
            val: '直角',
            icon: 'iconPic_square'
          },
            {
              val: '圆角',
              icon: 'iconPic_fillet'
            }
          ]
        },
        conStyle: {
          title: '内容样式',
          name: 'conStyle',
          type: 0,
          list: [{
            val: '直角',
            icon: 'iconPic_square'
          },
            {
              val: '圆角',
              icon: 'iconPic_fillet'
            }
          ]
        },
        mbConfig: {
          title: '页面间距',
          val: 0,
          min: 0
        },
        dataLoading: {
          title: '展示数据',
          name: 'dataLoading',
          type: 0,
          list: [
            {
              val: '加载数据',
              icon: 'iconPic_fillet'
            },
          ]
        },
        itemConfig: {
          title: '内容间距',
          val: 10,
          min: 0
        },
      },
      navlist: [],
      imgStyle: '',
      txtColor: '',
      itemBgColor: '',
      slider: '',
      itemPaLSlider: 10,
      itemPaRSlider: 10,
      tabCur: 0,
      list: [],
      activeColor: '',
      fontColor: '',
      itemStyle: 0,
      titleColor: "",
      bgStyle: 0,
      conStyle: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.pageData = this.$store.state.mobildConfig.defaultArray[this.num]
      this.getServiceLst(this.pageData)
    })
  },
  methods: {
    setConfig(data) {
      if (!data) return
      if (data.mbConfig) {
        this.itemStyle = data.itemStyle.type || 0;
        this.activeColor = data.themeColor.color[0].item;
        this.fontColor = data.fontColor.color[0].item;
        this.titleColor = data.titleColor.color[0].item;
        this.itemBgColor = data.itemBgColor.color[0].item;
        this.slider = data.mbConfig.val;
        this.itemPaRSlider = data.itemConfig.val;
        this.itemPaLSlider = data.itemConfig.val;
        this.bgStyle = data.bgStyle.type;
        this.conStyle = data.conStyle.type;
      }
    },
    getServiceLst(data) {
      serviceLstApi({page: 1, limit: data.numConfig.val}).then(res => {
        this.list = res.data.list
        this.setConfig(this.pageData)
      })
    }

  }
}
</script>
<style scoped lang="scss">
.pageOn {
  border-radius: 8px;
}

.u-p-t-10 {
  padding-top: 5px;
}

.u-p-t-15 {
  padding-top: 8px;
}

.u-p-l-30 {
  padding-left: 16px;
}

.u-m-l-15 {
  margin-left: 8px;
}

.u-m-b-30 {
  margin-bottom: 15px;
}

.u-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.u-flex-col {
  display: flex;
  flex-direction: column;
}

.u-flex-1 {
  flex: 1;
}

.u-row-between {
  justify-content: space-between;
}

.list {
  padding-bottom: 20px;

  .item {
    padding: 14px 8px;
    flex-direction: inherit;
    align-items: inherit;

    &.itemOn {
      border-radius: 10px;
      margin-bottom: 6px;
      border-bottom: unset;
    }

    .thumb {
      width: 140px;
      height: 106px;
      border-radius: 5px;
    }

    .price {
      font-size: 16px;
      vertical-align: middle;

      .free {
        color: #18b566;
      }
    }

    .u-flex-col {
      .title {
        font-size: 16px;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

      .m-b-p {
        margin-top: auto;
      }
    }

    .u-tag {
      box-sizing: border-box;
      align-items: center;
      border-radius: 24px;
      display: inline-block;
      line-height: 1;
      font-size: 12px;
      padding: 3px 6px;
    }
  }

  &.list-1 {
    padding: 0 12px;

    .item {
      padding: 10px 0;

      .thumb {
        width: 350px;
        height: 172px;
        border-radius: 6px;
      }
    }
  }
}
</style>
